<template>
  <div class="container-table">
    <div class="item item-layout">
      <div class="label-item required">业务模式</div>
      <div class="content-item">海运出口,{{ detailData.fclLcl }}</div>
    </div>
    <div class="item item-layout" style="width: 75%">
      <div class="label-item required">服务内容</div>
      <div class="content-item">
        {{ detailData.seviceType.join(',') }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item required">委托单位</div>
      <div class="content-item">
        {{ detailData.requester }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item required">委托单号</div>
      <div class="content-item">
        {{ detailData.consignmentNo }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item">货物来源</div>
      <div class="content-item">{{ detailData.cargoSource }}</div>
    </div>
    <div class="item item-layout">
      <div class="label-item">货好时间</div>
      <div class="content-item">
        {{
          detailData.preDeliveryDate
            ? $utils.formatDateTime(
                detailData.preDeliveryDate,
                'YYYY-MM-DD HH:mm'
              )
            : ''
        }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item">订舱单位</div>
      <div class="content-item">
        {{ detailData.bookingParty }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item required">签单方式</div>
      <div class="content-item">
        {{ detailData.billType }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item required">签单份数</div>
      <div class="content-item">
        {{
          detailData.originalBillNumber
            ? detailData.originalBillNumber + '正本'
            : ''
        }}{{
          detailData.originalBillCopyNumber
            ? '/' + detailData.originalBillCopyNumber + '副本'
            : ''
        }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item">签单地点</div>
      <div class="content-item">
        {{ detailData.signingLocation }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item">订舱代理</div>
      <div class="content-item">
        {{ detailData.bookingAgent }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item">运输条款</div>
      <div class="content-item">
        {{ detailData.carriageConditions }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item">付款方式</div>
      <div class="content-item">
        {{ detailData.payment }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item">付款地点</div>
      <div class="content-item">
        {{ detailData.payPlace }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item">船公司</div>
      <div class="content-item">
        {{ detailData.shipowner }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item required">起运港</div>
      <div class="content-item">
        {{ detailData.loadingPort }}
        {{ detailData.loadingPortCode ? ',' + detailData.loadingPortCode : '' }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item">装货地点</div>
      <div class="content-item">
        {{ detailData.receiptPlace }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item">中转港</div>
      <div class="content-item">
        {{ detailData.transshipmentPort }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item">港口航线</div>
      <div class="content-item">
        {{ detailData.portRoute }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item required">目的港</div>
      <div class="content-item">
        {{ detailData.dischargePort }}
        {{
          detailData.dischargePortCode ? ',' + detailData.dischargePortCode : ''
        }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item">卸货地点</div>
      <div class="content-item">
        {{ detailData.unloadingPlace }}
        {{ detailData.unloadPlaceCode ? ',' + detailData.unloadPlaceCode : '' }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item required">目的地</div>
      <div class="content-item">
        {{ detailData.finalDestination }}
        {{
          detailData.finalDestinationCode
            ? ',' + detailData.finalDestinationCode
            : ''
        }}
      </div>
    </div>
    <div class="item item-layout" style="width: 100%">
      <div class="label-item required">货物类型</div>
      <div class="content-item">
        {{ detailData.cargoType }}
      </div>
    </div>
    <div class="item item-layout" style="width: 50%" v-if="detailData.isCold">
      <div class="label-item required">冷藏温度</div>
      <div class="content-item-split">
        <div style="width: 50%">{{ detailData.coldTemp }}</div>
        <div style="width: 50%">{{ detailData.coldTempUnit }}</div>
      </div>
    </div>
    <div class="item item-layout" style="width: 50%" v-if="detailData.isCold">
      <div class="label-item required">通风量</div>
      <div class="content-item-split">
        <div style="width: 50%">{{ detailData.ventilationRate }}</div>
        <div style="width: 50%">{{ detailData.ventilationRateUnit }}</div>
      </div>
    </div>
    <div class="item item-layout" v-if="detailData.isDanger">
      <div class="label-item required">UN NO</div>
      <div class="content-item">
        {{ detailData.unno }}
      </div>
    </div>
    <div class="item item-layout" v-if="detailData.isDanger">
      <div class="label-item required">CLASS NO</div>
      <div class="content-item">
        {{ detailData.type }}
      </div>
    </div>
    <div class="item item-layout" style="width: 50%" v-if="detailData.isDanger">
      <div class="label-item required">闪点</div>
      <div class="content-item-split">
        <div style="width: 50%">{{ detailData.flashTemp }}</div>
        <div style="width: 50%">{{ detailData.flashTempUnit }}</div>
      </div>
    </div>
    <div class="item item-layout" v-if="detailData.isOog">
      <div class="label-item required">尺寸单位</div>
      <div class="content-item">
        {{ detailData.cargoUnit }}
      </div>
    </div>
    <div class="item item-layout" v-if="detailData.isOog">
      <div class="label-item required">超限-前</div>
      <div class="content-item">
        {{ detailData.overFrontLength }}
      </div>
    </div>
    <div class="item item-layout" v-if="detailData.isOog">
      <div class="label-item required">超限-后</div>
      <div class="content-item">
        {{ detailData.overBackLength }}
      </div>
    </div>
    <div class="item item-layout" v-if="detailData.isOog">
      <div class="label-item required">超限-左</div>
      <div class="content-item">
        {{ detailData.overLeftLength }}
      </div>
    </div>
    <div class="item item-layout" style="width: 50%" v-if="detailData.isOog">
      <div class="label-item required">超限-右</div>
      <div class="content-item">
        {{ detailData.overRightLength }}
      </div>
    </div>
    <div class="item item-layout" style="width: 50%" v-if="detailData.isOog">
      <div class="label-item required">超限-高</div>
      <div class="content-item">
        {{ detailData.overHeightLength }}
      </div>
    </div>

    <div class="item item-layout" style="width: 100%">
      <div class="label-item required">箱型箱量</div>
      <div class="content-item">
        {{ detailData.formatBoxs }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item required">总件数</div>
      <div class="content-item">
        {{ detailData.pkgs }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item required">总包装</div>
      <div class="content-item">
        {{ detailData.packageType }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item required">总毛重（KGS）</div>
      <div class="content-item">
        {{ detailData.grossWeight }}
      </div>
    </div>
    <div class="item item-layout">
      <div class="label-item required">总体积（CBM）</div>
      <div class="content-item">
        {{ detailData.measurement }}
      </div>
    </div>
    <div class="item item-layout" style="width: 100%">
      <div class="label-item required">HS CODE</div>
      <div class="content-item">
        {{ detailData.hscode }}
      </div>
    </div>
    <div class="item item-layout item-min-height" style="width: 33.33%">
      <div class="label-item required">唛头信息</div>
      <div
        class="content-item"
        v-html="detailData.marks"
        style="white-space: pre-line"
      ></div>
    </div>
    <div class="item item-layout item-min-height" style="width: 33.33%">
      <div class="label-item required">英文品名</div>
      <div
        class="content-item"
        v-html="detailData.cargoName"
        style="white-space: pre-line"
      ></div>
    </div>
    <div class="item item-layout item-min-height" style="width: 33.33%">
      <div class="label-item">中文品名</div>
      <div
        class="content-item"
        v-html="detailData.cargoNameCn"
        style="white-space: pre-line"
      ></div>
    </div>
    <div class="item item-layout item-min-height" style="width: 33.33%">
      <div class="label-item required">发货人</div>
      <div
        class="content-item"
        v-html="detailData.shipper"
        style="white-space: pre-line"
      ></div>
    </div>
    <div class="item item-layout item-min-height" style="width: 33.33%">
      <div class="label-item required" style="white-space: pre-line">
        收货人
      </div>
      <div
        class="content-item"
        v-html="detailData.consignee"
        style="white-space: pre-line"
      ></div>
    </div>
    <div class="item item-layout item-min-height" style="width: 33.33%">
      <div class="label-item required" style="white-space: pre-line">
        通知人
      </div>
      <div
        class="content-item"
        v-html="detailData.notifyPerson"
        style="white-space: pre-line"
      ></div>
    </div>
    <div
      class="item item-layout item-min-height"
      v-if="detailData.secondPerson"
      style="width: 100%"
    >
      <div class="label-item required">第二通知人</div>
      <div
        class="content-item"
        style="white-space: pre-line"
        v-html="detailData.secondPerson"
      ></div>
    </div>
    <div class="item item-layout item-min-height" style="width: 66.66%">
      <div class="label-item">订舱备注</div>
      <div
        class="content-item"
        v-html="detailData.memo"
        style="white-space: pre-line"
      ></div>
    </div>
    <div class="item item-layout item-min-height" style="width: 33.33%">
      <div class="label-item">其他备注</div>
      <div
        class="content-item"
        v-html="detailData.otherRemark"
        style="white-space: pre-line"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { computed, defineComponent, nextTick, reactive, ref } from 'vue'
import AppSearchForm from '@/components/AppSearchForm.vue'
import AppPageTable, { useTableOption } from '@/components/AppPageTable2'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { useStore, Store } from 'vuex'
import request from '@/public/request'
import selectDown from '../newBusiness/selectDownNew.vue'
import vueBus from '@/utils/vueBus'
import docSelects from './../components/docSelects.vue'
import docDetailFillShipperNew from './docDetailFillShipperNew.vue'
import { validateOnlyNumberTwo, validateNumber } from '@/utils/validate.js'

//判断当前打开的是否是业务列表
const props = defineProps({
  detailData: {
    type: Object,
    defalut: () => {}
  }
})

// 弹框的form表单
const addFormRef = ref(null)
const BLDialog = ref(null)

const state = reactive({
  show: false,
  showCheck: false,
  cargonList: [],
  showCold: false,
  showDranger: false,
  showOog: false,
  secondeShow: false
})

const Router = useRouter()
const Route = useRoute()
const store = useStore()
</script>

<style lang="scss" scoped>
@import '@/styles/business/business.scss';
</style>
